import { TitleIconBg } from '@/components/bs-comp/cardComponent'
import { LoadIcon } from '@/components/bs-icons/loading'
import { Button } from '@/components/bs-ui/button'
import { DialogClose, DialogContent, DialogFooter } from '@/components/bs-ui/dialog'
import { Textarea } from '@/components/bs-ui/input'
import { useToast } from '@/components/bs-ui/toast/use-toast'
import { useAssistantStore } from '@/store/assistantStore'
import { AssistantTool } from '@/types/assistant'
import { FlowType } from '@/types/flow'
import { ReloadIcon } from '@radix-ui/react-icons'
import { t } from 'i18next'
import { useEffect, useRef, useState } from 'react'
import { useParams } from 'react-router-dom'

const enum LoadType {
  Prompt = 5,
  GuideWord = 4,
  GuideQuestion = 3,
  Tool = 2,
  Flow = 1
}

export default function AutoPromptDialog({ onOpenChange }) {
  const { toast } = useToast()
  const { id } = useParams()
  const { assistantState, dispatchAssistant } = useAssistantStore()

  const init = () => {
    const prompt = areaRef.current.value
    const apiUrl = `/api/v1/assistant/auto?assistant_id=${id}&prompt=${encodeURIComponent(prompt)}`
    const eventSource = new EventSource(apiUrl)
    areaRef.current.value = ''
    let queue = LoadType.Prompt
    setLoading(queue)

    eventSource.onmessage = event => {
      // If the event is parseable, return
      if (!event.data) {
        return
      }
      const parsedData = JSON.parse(event.data)
      // console.log('parsedData :>> ', parsedData);
      switch (parsedData.type) {
        case 'prompt':
          areaRef.current.value += parsedData.message.replace('```markdown', '')
          break
        case 'guide_word':
          guideAreaRef.current.value += parsedData.message
          break
        case 'guide_question':
          setQuestion(parsedData.message)
          break
        case 'tool_list':
          setTools(parsedData.message)
          break
        case 'flow_list':
          setFlows(parsedData.message)
          break
        case 'end':
          setLoading(--queue)
          if (parsedData.message) {
            toast({
              title: t('tip'),
              variant: 'error',
              description: parsedData.message
            })
          }
          break
      }
      // 自动滚动
      areaRef.current.scrollTop = areaRef.current.scrollHeight
    }

    eventSource.onerror = (error: any) => {
      console.error('EventSource failed:', error)
      eventSource.close()
      if (error.data) {
        const parsedData = JSON.parse(error.data)
        setLoading(0)
        toast({
          title: parsedData.error,
          variant: 'error',
          description: ''
        })
      }
    }
  }

  useEffect(() => {
    // api
    init()
  }, [])

  const [loading, setLoading] = useState(0)
  const handleReload = () => {
    init()
  }

  /**
   * 使用
   */
  const { message } = useToast()
  // state
  const areaRef = useRef(null)
  const guideAreaRef = useRef(null)
  const [question, setQuestion] = useState<string[]>([])
  const [tools, setTools] = useState<AssistantTool[]>([])
  const [flows, setFlows] = useState<FlowType[]>([])
  // 更新提示词
  const handleUsePropmt = () => {
    const value = areaRef.current.value
    dispatchAssistant('setPrompt', { prompt: value })
    message({
      variant: 'success',
      title: t('tip'),
      description: t('build.promptReplaced')
    })
  }

  const handleUserQuestion = () => {
    dispatchAssistant('setQuestion', { guide_question: [...question, ''] })
    message({
      variant: 'success',
      title: t('tip'),
      description: t('build.guideReplaced')
    })
  }

  const handleUseGuide = () => {
    const value = guideAreaRef.current.value
    dispatchAssistant('setGuideword', { guide_word: value })
    message({
      variant: 'success',
      title: t('tip'),
      description: t('build.openingReplaced')
    })
  }

  const handleUseTools = () => {
    dispatchAssistant('setTools', { tool_list: tools })
    message({
      variant: 'success',
      title: t('tip'),
      description: t('build.toolsReplaced')
    })
  }

  const handleUseFlows = () => {
    dispatchAssistant('setFlows', { flow_list: flows })
    message({
      variant: 'success',
      title: t('tip'),
      description: t('build.skillsReplaced')
    })
  }

  const handleUseAll = () => {
    dispatchAssistant('setPrompt', { prompt: areaRef.current.value })
    dispatchAssistant('setGuideword', { guide_word: guideAreaRef.current.value })
    dispatchAssistant('setTools', { tool_list: tools })
    dispatchAssistant('setFlows', { flow_list: flows })
    dispatchAssistant('setQuestion', { guide_question: [...question, ''] })
    // 收集结果
    message({
      variant: 'success',
      title: t('tip'),
      description: t('build.allReplaced')
    })
    onOpenChange(false)
  }

  return (
    <DialogContent className="sm:max-w-[925px]">
      <div className="flex">
        {/* 提示词 */}
        <div className="relative w-[50%] pr-6">
          <div className="flex items-center justify-between">
            <span className="flex text-lg font-semibold leading-none tracking-tight">
              {t('build.portraitOptimization')}
              {LoadType.Prompt === loading && <LoadIcon className="ml-2 text-gray-600" />}
            </span>
            <Button variant="link" size="sm" onClick={handleReload} disabled={!!loading}>
              <ReloadIcon className="mr-2" />
              {t('build.retry')}
            </Button>
          </div>
          <div className="group relative mt-2 flex h-[600px] justify-end">
            <Textarea
              ref={areaRef}
              className="h-full"
              defaultValue={assistantState.prompt}
              placeholder={t('build.prompt')}
            ></Textarea>
            <Button
              className="absolute bottom-4 right-4 hidden h-6 group-hover:flex"
              disabled={LoadType.Prompt <= loading}
              size="sm"
              onClick={handleUsePropmt}
            >
              {t('build.use')}
            </Button>
          </div>
        </div>
        {/* 自动配置 */}
        <div className="w-[50%] border-l pl-6">
          <div>
            <span className="text-lg font-semibold leading-none tracking-tight">
              {t('build.automaticallyConfigurations')}
            </span>
          </div>
          <div className="max-h-[660px] overflow-y-auto">
            {/* 开场白 */}
            <div className="group relative mt-4 rounded-md bg-gray-100 px-4 py-2 pb-12">
              <div className="text-md mb-2 flex font-medium leading-none">
                {t('build.openingRemarks')}
                {LoadType.GuideWord === loading && <LoadIcon className="ml-2 text-gray-600" />}
              </div>
              <Textarea ref={guideAreaRef} className="border-none bg-gray-50 bg-transparent"></Textarea>
              <Button
                className="absolute bottom-4 right-4 hidden h-6 group-hover:flex"
                disabled={LoadType.GuideWord <= loading}
                size="sm"
                onClick={handleUseGuide}
              >
                {t('build.use')}
              </Button>
            </div>
            {/* 引导词 */}
            <div className="group relative mt-4 rounded-md bg-gray-100 px-4 py-2 pb-12">
              <div className="text-md mb-2 flex font-medium leading-none">
                {t('build.guidingQuestions')}
                {LoadType.GuideQuestion === loading && <LoadIcon className="ml-2 text-gray-600" />}
              </div>
              {question.map(qs => (
                <p key={qs} className="mb-2 rounded-xl bg-gray-50 px-2 py-1 text-sm text-muted-foreground">
                  {qs}
                </p>
              ))}
              <Button
                className="absolute bottom-4 right-4 hidden h-6 group-hover:flex"
                disabled={LoadType.GuideQuestion <= loading}
                size="sm"
                onClick={handleUserQuestion}
              >
                {t('build.use')}
              </Button>
            </div>
            {/* 插件 */}
            <div className="group relative mt-4 rounded-md bg-gray-100 px-4 py-2 pb-10">
              <div className="text-md mb-2 flex font-medium leading-none">
                {t('build.tools')}
                {LoadType.Tool === loading && <LoadIcon className="ml-2 text-gray-600" />}
              </div>
              <div className="pt-1">
                {tools.map(tool => (
                  <div key={tool.id} className="mt-2 flex items-center gap-2">
                    <TitleIconBg id={tool.id} className=" h-7 w-7" />
                    <p className="text-sm">{tool.name}</p>
                  </div>
                ))}
              </div>
              <Button
                className="absolute bottom-4 right-4 hidden h-6 group-hover:flex"
                disabled={LoadType.Tool <= loading || !tools.length}
                size="sm"
                onClick={handleUseTools}
              >
                {t('build.use')}
              </Button>
            </div>
            {/* 技能 */}
            <div className="group relative mt-4 rounded-md bg-gray-100 px-4 py-2 pb-10">
              <div className="text-md mb-2 flex font-medium leading-none">
                {t('build.skill')}
                {LoadType.Flow === loading && <LoadIcon className="ml-2 text-gray-600" />}
              </div>
              <div className="pt-1">
                {flows.map(flow => (
                  <div key={flow.id} className="mt-2 flex items-center gap-2">
                    <TitleIconBg id={flow.id} className=" h-7 w-7" />
                    <p className="text-sm">{flow.name}</p>
                  </div>
                ))}
              </div>
              <Button
                className="absolute bottom-4 right-4 hidden h-6 group-hover:flex"
                disabled={LoadType.Flow <= loading || !flows.length}
                size="sm"
                onClick={handleUseFlows}
              >
                {t('build.use')}
              </Button>
            </div>
          </div>
        </div>
      </div>
      <DialogFooter>
        <DialogClose>
          <Button variant="outline" className="px-11" type="button">
            {t('cancle')}
          </Button>
        </DialogClose>
        <Button type="submit" className="px-11" disabled={!!loading} onClick={handleUseAll}>
          {t('build.useAll')}
        </Button>
      </DialogFooter>
    </DialogContent>
  )
}
